<template>
  <div class="state-container">
    <template v-if="rtuPortDisplays.length <= 6">
      <dl v-for="(item, index) in rtuPortDisplays" :key="index">
        <dt :class="getClass(item)">
          {{ getState(item) }}
          <em>{{ item.unit }}</em>
        </dt>
        <dd class="iconfont" :class="item.iconfont" />
        <dd class="name">{{ item.name }}</dd>
      </dl>
    </template>
    <template v-else>
      <dl
        v-for="(item, index) in rtuPortDisplays"
        :key="index"
        class="min-width"
      >
        <dt :class="getClass(item)">
          {{ getState(item) }}
          <em>{{ item.unit }}</em>
        </dt>
        <dd class="iconfont" :class="item.iconfont" />
        <dd class="name">{{ item.name }}</dd>
      </dl>
    </template>
  </div>
</template>

<script>
  import { getDeviceState } from '@/utils/device'
  import { runDict, closeDict } from '@/utils/constant'
  export default {
    props: {
      device: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    computed: {
      rtuPortDisplays() {
        const res =
          this.device.rtuPortDisplays || this.device.rtu_port_displays || []
        return res.filter((val) => {
          return +val.show_state > 0
        })
      },
      states() {
        return this.device.states || {}
      },
    },
    methods: {
      getState(item) {
        return getDeviceState(this.states[item.namekey], item, this.states)
      },
      getClass(item) {
        if (runDict.includes(this.getState(item))) {
          return 'color-success'
        }
        if (closeDict.includes(this.getState(item))) {
          return 'color-danger'
        }
        return ''
      },
    },
  }
</script>

<style lang="scss" scoped>
  .text {
    margin-left: auto;
  }
  .state-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: -20px;
    padding: 12px 0;
    dl {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-top: 32px;
      text-align: center;
      color: #666;
      // &.min-width{
      //   width: calc(100% / 12);
      //   min-width: calc(100% / 12);
      //   max-width: calc(100% / 12);
      // }
      dt {
        font-weight: bold;
        font-size: 16px;
        color: #333;
        &.color-success {
          color: #13ce66;
        }
        &.color-warning {
          color: #ffba00;
        }
        &.color-danger {
          color: #ff4949;
        }
        em {
          font-style: normal;
          font-size: 14px;
          padding-left: 4px;
        }
      }
      dd {
        &.iconfont {
          font-size: 18px;
          margin-top: 12px;
        }
        &.name {
          font-size: 12px;
          margin-top: 14px;
        }
      }
    }
  }
</style>
